<template>
  <el-tag size="mini" v-show="txt" :type="type" @click="handleClick()">{{txt}}</el-tag>
</template>

<script>
  export default {
    name:'ColumnDict',
    dicts:[],
    props:{
      scope:Object,
      options:Object,
      column:{
        type:Object
      }
    },
    data(){
      return {
        txt:"",
        type:""
      }
    },
    created(){
      this.$watch(`scope.row.${this.column.prop}`,(val)=>{
        this.getText();
      })
    },
    mounted(){
      this.getText();
    },
    methods:{
      getText(){
        const row = this.scope.row;
        const col = this.column;
        this.dict.init([col.options]).then(()=>{
          let arr = this.dict.getRows(col.options,row[col.prop]);
          this.txt = arr.label;
          this.type = arr.listClass || 'info';
        })
      },
      handleClick(){
        let row = this.scope.row;
        let fun = this.column.onClick;
        if(fun){
          fun(row);
        }
      }
    }
  }
</script>
